<template>
	<scroll-view class="page-content" :scroll-top="scrollTop" scroll-y="true">
		<!-- @scrolltolower="loadmore()" -->
		<view class="index-header">
			<!--导航-->
			<view class="nav">
				<view class="nav-item" @click="handleActive(1)"
					:class="[active === 1 ? 'active' : active === 2 ? '' : '']">
					队伍信息
				</view>
				<view class="nav-item" @click="handleActive(2)"
					:class="[active === 1 ? '' : active === 2 ? 'active' : '']">
					赛事详情
				</view>
			</view>
		</view>
		<view class="page-body">
			<!--队伍信息-->
			<view class="body-item" v-if="active === 1">
				<team-info @chakan="chakan" @toedit="toedit" @dellink="dellink"  @callpho="callpho" @recordid="recordid" :datalist="datalist1"  @imgDelete="imgDelete" @ChooseSuccess="ChooseSuccess"></team-info>
			</view>

			<!--赛事详情-->
			<view class="body-item" v-if="active === 2">
				<entry-info :datalist="datalist2"></entry-info>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import loadMore from "@/components/uni-load-more/load-more.vue";
	import entryInfo from "@/pages/user/components/entry_info.vue"; //赛事详情组件
	import teamInfo from "@/pages/user/components/team_info"; //赛事详情组件
	import {
		getGameTeamInfos, //获取赛事报名团队信息
		getgameinfos, //获取待开赛比赛详情
		upGameMapCoordImgs, //上传坐标点图片 
	} from '@/common/api.js'
	export default {
		components: {
			entryInfo,
			teamInfo,
			loadMore
		},
		data() {
			return {
				scrollTop: 0,
				load_sta: false, //是否是加载状态
				active: 1, //tab导航
				datalist1: {},
				datalist2: {},
				game_id: '',//赛事id传值
				coord_id:'', //坐标id
				team_id:'',//团队id
				formdata:{
					img:''
				},
				
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid'])
		},
		onShow() {
			this.getdata1();
			this.getdata2();
		},
		onLoad(option) {
			console.log(1, option)
			if(option.id){
				this.game_id = option.id
			}
		},
		methods: {
			dellink(){
				uni.navigateTo({
					url: `/packageA/clockIn/clockIn?game_id=${this.game_id}`
				})
			},
			//预览图片
			chakan(url) {
				console.log(222,url)
				let urls = [];
				urls.push(url)
				uni.previewImage({
					urls: urls, // urls是数组
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			recordid(id){
				if(this.datalist1.sign_data && this.datalist1.sign_data.length>0){
					this.datalist1.sign_data.forEach(item=>{
						if(item.id===id){
							this.coord_id = item.id;
						}
					})
				}
				this.team_id = this.datalist1.id;
			},
			imgDelete(row){
				let _self = this;
				let get_data = 'game_id=' + _self.game_id +'&team_id='+ _self.team_id +'&coord_id='+ _self.coord_id
				let file = {
					file:[]
				};
				upGameMapCoordImgs(file,get_data).then(res =>{
					console.log(123123)
				})
			},
			ChooseSuccess(tempFilePaths) { //选择图片返回
			  this.imgUpload(tempFilePaths);
			},
			imgUpload(tempFilePaths) {
			  let _self = this;
			  uni.showLoading({
			    title: '上传中'
			  });
			  let uploadImgs = [];
			  tempFilePaths.forEach((item, index) => {
			    uploadImgs.push(new Promise((resolve, reject) => {
			      let str = 'blob:http://localhost:8080/';
			      let imgName= '';
			      if(item.indexOf(str)>-1){
			        imgName = item.split("blob:http://localhost:8080/")[1]
			      }else {
			        imgName = item
			      }
				  //上传图片接口
			      uni.uploadFile({
			        url: 'https://cys.swy666.cn/api/upGameMapCoordImg?game_id=' + _self.game_id +'&team_id='+ _self.team_id +'&coord_id='+ _self.coord_id+'&openid=' + _self.openid,
			        formData: {
			          key: imgName + '.jpg',
			          fname:imgName + '.jpg',
			        },
			        filePath: item,
			        name: 'file',
			        success: (uploadFileRes) => {
			          resolve(uploadFileRes);
			          let _res = JSON.parse(uploadFileRes.data);
					  if(_self.datalist1.sign_data && _self.datalist1.sign_data.length>0){
					  	_self.datalist1.sign_data.forEach(item=>{
							let check_img = []
					  		if(item.id === _self.coord_id){
					  			check_img.push(_res.data.img)
								item.check_img = check_img;
					  		}
					  	})
					  }
			        },
			        fail: (err) => {
			          console.log(err);
			          reject(err);
			        },
			        complete: () => {
			          //uni.hideLoading();
			        }
			      });
			    }))
			  })
			  Promise.all(uploadImgs).then((results) => { //执行所有需请求的接口
			        uni.hideLoading();
			      })
			      .catch((res, object) => {
			        uni.hideLoading();
			      });
			},
			//打电话
			callpho(pho){
				uni.makePhoneCall({
				    phoneNumber: pho
				});
			},
			toedit(id){
				uni.navigateTo({
					url: '/pages/user/entryEdit?team_id=' + id +'&game_id=' + this.game_id
				})
			},
			//获取当前比赛数据
			getdata1() {
				getGameTeamInfos({
					game_id:this.game_id
				}).then(res => {
					if(res.code === 2000){
						this.datalist1 = res.data;
						this.datalist1.clock_qr_img = res.data.clock_qr_img;
						if(this.datalist1.sign_data && this.datalist1.sign_data.length>0){
							this.datalist1.sign_data.forEach(item =>{
								this.$set(item,'check_img',Array);
								let check_img = [];
								if(item.img!=''){
									check_img.push(item.img);
									item.check_img = check_img;
								}
							})
						}
					}
				})
			},
			//赛事详情
			getdata2() {
				getgameinfos({
					id: this.game_id
				}).then(res => {
					if(res.code === 2000){
						this.datalist2 = res.data;
						this.datalist2.onload_img = res.data.game_img[0];
						this.datalist2.signsta = res.data.status;
						this.datalist2.signtime = res.data.sign_start_time.replace(/-/g,'/') + ' - ' + res.data.sign_end_time.replace(/-/g,'/');
						this.datalist2.game_start_time = res.data.game_start_time.replace(/-/g,'/');
						this.datalist2.remarks = this.formatRichText(res.data.remark);
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			handleActive(e) {
				let _self = this;
				_self.active = e;
				_self.load_sta = false;
				if (_self.active === 1) {
					_self.getdata1();
				}
				if (_self.active === 2) {
					_self.getdata2();
				}
			},
			//跳转比赛详情
			clickdet(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.page-content {
		height: 100vh;
		width: 100vw;
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.index-header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 70rpx;
		background-color: #f5f5f5;
		position: relative;

		.nav {
			height: 100rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			color: #999;

			.nav-item {
				flex: 1;
				position: relative;

				&::after {
					content: '';
					width: 0;
					height: 8rpx;
					background-color: #02BB6F;
					border-radius: 4px;
					position: absolute;
					left: 50%;
					bottom: -12rpx;
					transform: translateX(-50%);
					transition: .3s;
				}

				&.active {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;

					&::after {
						width: 60rpx;
					}
				}
			}
		}
	}

	.page-body {
		height: calc(100% - 70rpx);
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;

		.body-item {
			margin: 20rpx 0 ;
		}
	}
</style>
